<template>
	<view class="home">
		<view class="top_bg" :style="{
			paddingTop: `${menuButtonInfo.top}px`
		}">
			<view class="top_bar flex v_center h_center" :style="{
				height: `${menuButtonInfo.height}px`
			}">
				<up-image :show-loading="true" src="/static/images/icon_1.png" width="130rpx" height="40rpx"></up-image>
			</view>
		</view>
		<view class="user_container">
			<view class="box flex flex_d_c">
				<view class="flex v_center">
					<up-avatar
						src="https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg"
						size="100rpx"></up-avatar>
					<up-text text="微信用户" size="18" color="#333333" style="margin-left: 20rpx;"></up-text>
				</view>
				<view class="cell_container">
					<view class="cell_item flex v_center" @click="goCoupon">
						<up-image :show-loading="true" src="/static/images/icon_2.png" width="54rpx"
							height="47rpx"></up-image>
						<up-text text="券包" color="#333333" bold size="18" style="margin-left: 20rpx;"></up-text>
					</view>
					<view class="cell_item flex v_center" @click="goOrder">
						<up-image :show-loading="true" src="/static/images/icon_3.png" width="44rpx"
							height="52rpx"></up-image>
						<up-text text="订单" color="#333333" bold size="18" style="margin-left: 20rpx;"></up-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { getCurrentInstance } from 'vue';

// #ifndef H5
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

const goOrder = () => {
	uni.navigateTo({
		url: '/pages/my/subpages/order'
	})
}

const goCoupon = () => {
	uni.navigateTo({
		url: '/pages/my/subpages/couponWallet'
	})
}

onShow(() => {
	const instance = getCurrentInstance();
	if (instance?.ctx?.$scope?.getTabBar?.()) {
		instance.ctx.$scope.getTabBar().setData({
			selected: 2
		}); // 0 替换为当前页索引
	}
});
</script>

<style lang="scss" scoped>
.home {
	min-height: 100vh;
	background-color: #fff;

	.top_bg {
		position: relative;
		height: 487rpx;
		min-height: 487rpx;
		background: no-repeat top center/100% 100% url('https://zxcxappimg.cxbtv.cn/qinghai/2025/07/14/26baaa47d06a125d20a333f6e64db291.png');

		.top_bar {
			width: 100%;
		}
	}

	.user_container {
		position: relative;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: -120rpx;

		.box {
			background-color: #f0f0f0;
			border-radius: 20rpx;
			padding: 32rpx 42rpx;
			box-sizing: border-box;
		}

		.cell_container {
			margin-top: 40rpx;

			.cell_item {
				padding: 16rpx 37rpx;
				border-radius: 15rpx;
				margin-bottom: 20rpx;
				background-color: #fff;
			}
		}
	}

	/* 自定义 css */
	.flex {
		display: flex;
	}

	.flex_d_c {
		flex-direction: column;
	}

	.h_sb {
		justify-content: space-between;
	}

	.h_start {
		justify-content: flex-start;
	}

	.h_center {
		justify-content: center;
	}

	.v_center {
		align-items: center;
	}

	.v_end {
		align-items: flex-end;
	}

	.v_baseline {
		align-items: baseline;
	}
}
</style>
